<template>
	<view>
		<uni-list-item title="头像" @click = "changeUserpic" >
			<view slot="right" class="flex align-center" >
			<image  :src="userpic" style="width: 90rpx;height: 90rpx;" class="rounded-circle" >			
			</image>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>
		</uni-list-item>
		<uni-list-item title="昵称" >
			<view class="flex align-center"  slot="right" >
			<input class="uni-input text-right" v-model="username" />
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>			
		</uni-list-item>
		
		<uni-list-item title="性别" @click="changeSex" >
			<view slot="right" class="flex align-center" >
			<text>{{sexText}}</text>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>		
		</uni-list-item>
		
		<picker mode="date" :value="birthday" @change ="onDateChange" >
		<uni-list-item title="生日" >
			<view slot="right" class="flex align-center" >
			<text  >{{birthday}}</text>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>		
		</uni-list-item>
		</picker>
		
		<uni-list-item title="情感" @click="changeEmotion" >
			<view slot="right" class="flex align-center" >
			<text  >{{emotionText}}</text>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>			
		</uni-list-item>
		
		<uni-list-item title="职业" @click="changeJob">
			<view slot="right" class="flex align-center" >
			<text  >{{job}}</text>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>		
		</uni-list-item>
		
		<uni-list-item title="家乡" @click = "showCityPicker">
			<view slot="right" class="flex align-center" >
			<text  >{{pickerText}}</text>
			<text class="iconfont icon-xiugai ml-2" ></text>
			</view>			
		</uni-list-item>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" onCancel ="onCancel" @onConfirm = "onConfirm"></mpvue-city-picker>
				
		
	 <view class="py-2 px-3" >
	 	<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" 
	 	type="primary">完成</button> 		
	 </view>
	
	</view>
</template>

<script>
	const sexArr = ['保密', '男', '女']
	const emotionArr = ['已婚', '未婚','离异']
	import uniListItem from "@/components/uni_ui/uni-list-item/uni-list-item.vue"
	import mpvueCityPicker from "@/components/uni_ui/mpvue-citypicker/mpvueCityPicker.vue"
	export default {
		components:{
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				themeColor:'3007AFF',
				cityPickerValueDefault:[0,0,1],
				pickerText:'重庆-市辖区-沙坪坝区',
				
				userpic:'/static/default.jpg',
				username:"昵称",
				sex:0,
				emotion:0,
				job:"保密",
				birthday:"1983-02-01"
			}
		},
		//监听返回
		onBackPress() {
			if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		//监听页面卸载
		onUnload() {
			if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		},
		computed:{
			sexText(){
				return sexArr[this.sex]
			},
			emotionText(){
				return emotionArr[this.emotion]
			}
		},
		methods: {
			//三级联动
			showCityPicker(){
				this.$refs.mpvueCityPicker.show()
			},
			//三级联动提交事件
			onConfirm(e){
				this.pickerText = e.label
			},
			changeUserpic(){
				uni.chooseImage({
					count:1,
					sizeType:["compressed"],
					sourceType:["album","camera"],
					success: (res) => {
						this.userpic = res.tempFilePaths[0]
					}
				})
			},
			//修改性别
			changeSex(){
				uni.showActionSheet({
				    itemList: sexArr,
				    success:(res)=> {
				      this.sex =  res.tapIndex
				    }
				});
			},
			changeEmotion(){
				uni.showActionSheet({
				    itemList: emotionArr,
				    success:(res)=> {
				      this.emotion =  res.tapIndex
				    }
				});
			},
			//修改职业
			changeJob(){
				let jobArr = ['IT' ,' 教师' ,'农民']
				uni.showActionSheet({
				    itemList: jobArr,
				    success:(res)=> {
				      this.job= jobArr[res.tapIndex] 
				    }
				});
			},
			//修改生日
			onDateChange(e){
				this.birthday = e.detail.value
			}
			
			
		}
	}
</script>

<style>

</style>
